import { useMemo, useEffect } from 'react'
import Popover from '@mui/material/Popover'
import { CacheProvider } from '@emotion/react'
import createCache from '@emotion/cache'
import styled from '@emotion/styled'
import MobilePopoverContent from './MobilePopoverContent'
import useClientDocument from '@/hooks/useClientDocument'

const StyledPopover = styled(Popover)(() => ({
  ".MuiPaper-root": {
    "background-color": "hsla(0, 0%, 0%, 0.3)",
    "border-radius": "6px",
    "box-shadow": "0 1px 4px 0 rgba(200,200,200, 0.1)",
    "backdrop-filter": "blur(100px)",
  }
}))

interface Props {
  open: boolean
  setOpen: (open: boolean) => void
}

const MobilePopover: React.FC<Props> = ({ open, setOpen }) => {

  const doc = useClientDocument()

  const EmotionCache = useMemo(() => {
    return createCache({
      key: "mobile-popover",
      container: doc?.head
    })
  }, [])

  return (
    <CacheProvider value={EmotionCache}>
      <StyledPopover
        anchorReference='anchorPosition'
        anchorPosition={{
          top: 60,
          left: 2
        }}
        open={open}
        onClose={() => setOpen(false)}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}

      >
        <div className="w-72 text-white">
          <MobilePopoverContent />
        </div>
      </StyledPopover>
    </CacheProvider>
  )
}

export default MobilePopover